<template>
	<view class="detail">
		<nav-bar title="放水调度" leftArrow />

		<view class="universal-head">
			<view class="universal-head-title">方案编号 {{ detail.plan.planNo }}</view>
			<!-- 完成 -->
			<view v-if="detail.feedback.flowStatus?.value === '2'" class="universal-status universal-status-success">
				{{ detail.feedback.flowStatus?.label }}
			</view>
			<!-- 未完成 -->
			<view v-else class="universal-status universal-status-warning">
				{{ detail.feedback.flowStatus?.label }}
			</view>
			<!-- <view v-else class="universal-status universal-status-warning">
				{{ item.auditStatus?.label }}
			</view> -->
		</view>

		<!-- WATER_AMOUNT("0", "需水量"),
    DISPATCH_WATER_AMOUNT("1", "调度详情"),
    RAINFALL("2", "降雨量"),
    ACTUAL_FILL_WATER_AMOUNT("3", "实际灌水量"),
    FILL_WATER_AMOUNT("4", "灌水水量"),
    TOTAL_FILL_WATER_AMOUNT("5", "总灌水量"), -->

		<view class="universal-detail">
			<view class="universal-detail-top">
				<view class="universal-detail-top-time">
					<text class="universal-detail-top-title">方案详情</text>
				</view>
				<view class="universal-detail-top-username">（注：需/灌水量m³）</view>
			</view>

			<view class="table" style="margin-top: 20rpx;">
				<view class="header">
					<view class="th td1">灌片</view>
					<view class="th td2">需水量</view>
					<view class="th td3">灌水量</view>
				</view>
				<view v-for="it in detail.details[0]" :key="it.projectItemId" class="tr">
					<view class="td td1">{{ it.projectItemName }}</view>
					<view class="td td2">{{ it.waterVolume }}</view>
					<view class="td td3">
						{{ detail.details[4].find(it2 => it2.projectItemId === it.projectItemId )?.waterVolume }}
					</view>
				</view>
			</view>
		</view>

		<!-- <view class="universal-detail">
			<view class="universal-detail-top">
				<view class="universal-detail-top-time">
					<text class="universal-detail-top-title">工程调度详情</text>
					{{ detail.name }}
				</view>
				<view class="universal-detail-top-username">（注：需/灌水量m³）</view>
			</view>
		</view> -->

		<view v-for="it in detail.details[1]" :key="it.projectItemId" class="universal-detail">
			<view class="universal-detail-top">
				<view class="universal-detail-top-time">
					<text class="universal-detail-top-title">{{ it.projectItemName }}</text>
				</view>
				<!-- <view class="universal-detail-top-username"></view> -->
			</view>

			<view class="universal-detail-cont">
				<view class="universal-detail-item">
					<view class="universal-detail-item-title">开启时间：</view>
					<view class="universal-detail-item-cont">{{ it.startTime }}</view>
				</view>
				<view class="universal-detail-item">
					<view class="universal-detail-item-title">开启时长：</view>
					<view class="universal-detail-item-cont">{{ formatMs(it.duration) }}</view>
				</view>
				<view class="universal-detail-item">
					<view class="universal-detail-item-title">流量：</view>
					<view class="universal-detail-item-cont">{{ it.flowVelocity }}m³/s</view>
				</view>
				<view class="universal-detail-item">
					<view class="universal-detail-item-title">水量：</view>
					<view class="universal-detail-item-cont">{{ it.waterVolume }}m³</view>
				</view>
			</view>
		</view>

		<!-- <view class="table">
			<view class="header">
				<view class="th">工程名称</view>
				<view class="th">开启时间</view>
				<view class="th">开启时长</view>
				<view class="th">流量</view>
				<view class="th">水量</view>
			</view>
			<view class="tr">
				<view class="td">1</view>
				<view class="td">-</view>
				<view class="td">1m</view>
				<view class="td">1m³/s</view>
				<view class="td">1m³</view>
			</view>
		</view> -->

		<FormHandle v-model="detail" v-if="_isCanOpt && detail.feedback.flowStatus?.value === '3'" @confirm="getDetail" />
		<!-- 待审核 完结 -->
		<DetailHandle v-model="detail"
			v-if="detail.feedback.flowStatus?.value === '1' || detail.feedback.flowStatus?.value === '2'" />

		<FormCheck v-model="detail" v-if="_isCanOpt && detail.feedback.auditStatus?.value === '1'"
			@confirm="getDetail" />
		<DetailCheck v-model="detail" v-if="detail.feedback.auditStatus === '2'" />
	</view>
</template>

<script setup>
	import {
		computed,
		ref
	} from 'vue';

	import dayjs from 'dayjs';

	import FormHandle from './components/FormHandle';
	import FormCheck from './components/FormCheck';

	import DetailHandle from './components/DetailHandle';
	import DetailCheck from './components/DetailCheck';

	import {
		apiWaterDemandPlanDetail
	} from '@/api/waterproofScheduling';

	import {
		splitFilesToImageVideo
	} from '@/utils/index';

	import store from '@/store'

	const path = defineProps({
		id: String,
	});

	const userInfo = store.getters.GET_USER_INFO.sysUser;
	const currentUserId = ref(Number(userInfo.userId) || '');
	const detail = ref({
		plan: {},
		details: [],
		feedback: {},
		notify: {},
	});

	const _isCanOpt = computed(() => {
		const todoUsers = detail.value.feedback?.todoUsers || [];
		return !!todoUsers.find(it => it == currentUserId.value);
	})

	const formatMs = (duration) => {
		if (duration < 60) return duration + 's';

		const m = parseInt(duration / 60);
		// it.duration
		const s = duration - m * 60;
		let _ = m + 'm';
		if (s) _ += ' ' + s + 's';

		return _;
	}

	const getDetail = () => {
		uni.showLoading({
			title: '加载中',
			mask: true
		});

		apiWaterDemandPlanDetail({
			value: path.id
		}).then(res => {
			// const urls = splitFilesToImageVideo(res.feedback.picIds)
			const {
				state
			} = res;
			detail.value = {
				...res,
				imagesUrl: res.feedback.picUrl || [],
				videosUrl: res.feedback.vedioUrl || [],
			}
		}).finally(() => {
			uni.hideLoading();
		});
	};

	getDetail();
</script>

<style lang="scss" scoped>
	@import '@/assets/universal-page.scss';
	@import '@/assets/universal-detail.scss';

	.detail {
		padding-bottom: 20rpx;

		.universal-detail {
			.universal-detail-item {
				width: 100%;
			}
		}
	}

	.table {

		.header,
		.tr {
			display: flex;
			justify-content: space-around;
			padding: 10rpx 0;
			background-color: #efefef;
		}

		.tr {
			background-color: #fff;
		}

		.header .th,
		.tr .td {
			line-height: 40rpx;
			padding: 5rpx;
			text-align: center;
			font-size: 24rpx;
		}

		.header .th {
			font-size: 28rpx;
			// font-weight: bold;
		}

		.tr {
			border-bottom: 1rpx solid #efefef;
		}

		.td1 {
			flex: 1;
		}

		.td2,
		.td3 {
			width: 180rpx;
		}
	}
</style>